import React, { useState, createContext } from "react";
import Son from "./Son";
// 创建一个 Context
export const Context = createContext(0);

const Father = () => {
  // 接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

  // 当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值。

  // useContext 的参数必须是 context 对象本身

  const [fatherData] = useState("我是父组件的数据");

  return (
    <div className="App">
      <h1>父子组件通信</h1>
      <h2>我是父组件</h2>
      <p>父传子，通过回调函数传值</p>
      <hr />
      <Context.Provider value={fatherData}>
        {/* 必需是 value */}
        <Son></Son>
      </Context.Provider>
    </div>
  );
};

export default Father;
